@import url("rem.less");
.main {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .menu-left {
        position: fixed;
        .t(142);
        left: 0;
        .w(270);
        float: left;
        z-index: 99;
        height: 100%;
        background: #fff;
        border-right: 1px solid #ccc;
        ul {
            li {
                width: 100%;
                .h(150);
                .lh(150);
                text-align: center;
                border-bottom: 1px solid #ccc;
            }
            .active{
                color: #d70057;
                box-shadow:5px 5px 5px #ccc inset,
                -5px -5px 5px #ccc inset; 
            }
        }
    }
    .menu-right {
        width: 75%;
        .ml(270);background: #fff;
        ul {
            .dis;justify-content: space-between;flex-wrap:wrap ;
            h5{width: 100%;text-align: center;}
            .swiper-container {
                width: 100%;
                .swiper-slide {
                    .w(180);
                    .h(120);
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .opts{
                width: 30%;dl{
                    text-align: center;
                    dt{
                        margin: auto;
                        width: 80%;img{width: 100%;}
                    }
                }
            }
        }
    }
}